<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input
        v-model="listQuery.vehicle"
        placeholder="请输入车牌号"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.phone"
        placeholder="请输入手机号"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />

      <!-- <el-input
        v-model="listQuery.cooperation"
        placeholder="请输入加油站名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      /> -->

      <el-select
        v-model="listQuery.cooperation"
        filterable
        class="filter-item"
        clearable
        placeholder="请选择加油站"
      >
        <el-option
          v-for="item in cooperation"
          :label="item.name"
          :value="item.uuid"
        />
      </el-select>
      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期时间"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        导出
      </el-button>
    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- <el-table-column
        prop="author"
        label="序号"
        align="center"
        width="80"
        value="scope.$index + 1"
      /> -->
      <el-table-column
        prop="cooperationName"
        label="加油站"
        align="center"
        min-width="95"
      />
      <el-table-column
        prop="vehicle"
        label="车牌号"
        align="center"
        width=""
      />
        <el-table-column
        prop="driverPhone"
        label="手机号"
        align="center"
        width=""
      />
      <el-table-column
        prop="money"
        label="金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="rate"
        label="折扣"
        align="center"
        width=""
      />
      <el-table-column
        label="优惠金额"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.payGift }}
        </template>
      </el-table-column>

      <el-table-column
        prop="actual"
        label="实际支付"
        align="center"
        width=""
      />



      <el-table-column
        prop="description"
        label="描述"
        align="center"
        min-width="110"
      />
      <!-- <el-table-column
        prop="orderNo"
        label="订单号"
        align="center"
        min-width="200"
      /> -->

      <!-- <el-table-column
        label="创建时间"
        width=""
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.created | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        prop="description"
        label="描述"
        width="220"
        align="center"
      /> -->
      <el-table-column
        prop="created"
        label="创建时间"
        min-width="90"
        align="center"
      />

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>
<script>
const defaultFormThead = ["apple", "banana"];
import { tradesList, cooperationAll, down, downList } from "@/api/v1";
import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { parseTime } from "@/utils";
import { getToken } from "@/utils/auth";

export default {
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableData: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      listQuery: {
        page: 1,
        limit: 20,
        sort: "+id",
        phone: "",
        vehicle: "",
        cooperation: "",
        startDay: "",
        endDay: "",
        accessToken: ""
      },
      key: 1, // table key
      formTheadOptions: ["apple", "banana", "orange"],
      checkboxVal: defaultFormThead, // checkboxVal
      formThead: defaultFormThead // 默认表头 Default header
    };
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      );
      this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  created() {
    const id = this.$route.query.id;
    this.listQuery.cooperation = id;
    console.log(id);
    this.getList();
    this.getCooperationAll();
  },
  methods: {
    // getCooperationTrade: function(id) {
    //   getCooperationTrade({ id: id })
    //     .then(response => {
    //       this.tableData = response.data.items;
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    handleDownload() {
      down(this.listQuery).then(res => {
        var _this = this;
        var accessToken = getToken();
        if (res.code == 0) {
          _this.listQuery.accessToken = accessToken;
          //          const data = {
          //            accessToken: getToken()
          //          }
          downList(_this.listQuery).then(res => {
            // console.log(res);
            window.open(res.request.responseURL);
          });
        } else {
          this.$message.error(res.msg);
          return;
        }
        // this.$router.push({
        //   path: "/down"
        // });
      });
    },
    getList() {
      this.listLoading = true;
      tradesList(this.listQuery).then(res => {
        this.tableData = res.data.records;
        this.total = Number(res.data.total);
        console.log(this.tableData);
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    getCooperationAll() {
      cooperationAll().then(res => {
        this.cooperation = res.data;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>

